<template>
  <div>
     <h3>用户管理 的全局数据{{this.$store.state.user.num}}</h3>
     <div>模块中的数据 {{ num }}</div>
     <div>模块中的数据 {{ n }}</div>
     <button @click="fn">同步方法</button>
     <button @click="fn2">异步方法</button>
     <button @click="fn3">简写同步方法</button>
     <button @click="fn4">简写异步方法</button>
     <user-add-vue></user-add-vue>
    <div class="tr">
        <div class="td">编号</div>
        <div class="td">用户名</div>
        <div class="td">年龄</div>
        <div class="td">操作</div>
    </div>
    <div class="tr" v-for="item in list" :key="item.id">
        <div class="td">{{ item.id }}</div>
        <div class="td">{{ item.username }}</div>
        <div class="td">{{ item.userage }}</div>
        <div class="td" @click="delById(item.id)">删除</div>
    </div>

  </div>
</template>

<script>
import  {mapState,mapMutations,mapActions} from  "vuex"
import UserAddVue from '../components/UserAdd.vue';
export default {
    components:{
        UserAddVue
    },
    computed:{
        ...mapState("user",["num","list"]),
        ...mapState('user',{
            n:"num"
        })
    },
    created(){
        this.initList({});
       
    },
    methods:{
        ...mapMutations("user",["addNum"]),
        ...mapActions("user",{
            "asyncAddNum":"addNum",
            "initList":"initList",
            "delListById":"delListById"
        }),
        fn(){
            this.$store.commit("user/addNum",2);
        },
        fn2(){
            this.$store.dispatch("user/addNum",10);
        },
        fn3(){
            this.addNum(-1);
        },
        fn4(){  
            this.asyncAddNum(-10);
        },
        delById(id){
            this.delListById(id);
        }
    }

}
</script>

<style scoped>
.tr{
    display:flex;
}
.tr  .td{
    flex:1
}


</style>